<template>
  <div>
    <a-modal
      title="未读通知"
      :visible="visible"
      @cancel="handleCancel"
      :maskClosable="false"
      :footer="null"
      width="950px"
    >
      <el-table :data="notices" border>
        <el-table-column prop="Subject" :show-overflow-tooltip="true" label="标题"></el-table-column>
        <el-table-column prop="type" label="类型" width="60px"></el-table-column>
        <el-table-column prop="Publisher" width="70px" label="发布人"></el-table-column>
        <el-table-column prop="PublishTime" label="发布时间" width="150px"></el-table-column>
        <el-table-column align="right" width="100px">
          <template slot="header" slot-scope="scope">
            <a-button type="danger" slot="action" @click="showAll()">全阅</a-button>
          </template>
          <template slot-scope="scope">
            <a-button type="primary" slot="action" @click="showReading(scope.row)">阅读</a-button>
          </template>
        </el-table-column>
      </el-table>
      <a-modal
        title="内容"
        v-model="contentVis"
        :footer="null"
        :maskClosable="false"
        width="1350px"
        @cancel="afterClose"
      >
        <iframe :src="url" frameborder="0" width="100%" height="750px" scrolling="auto"></iframe>
      </a-modal>
    </a-modal>
  </div>
</template>

<script type="text/javascript">
  import { ACCESS_TOKEN, ACCESS_TOKEN_IP } from '@/store/mutation-types'
  import { mapActions, mapGetters } from 'vuex'
  import Vue from 'vue'
  import axios from 'axios'

  export default {
    data() {
      return {
        notices: [],
        visible: false,
        title: '',
        url: '',
        contentVis: false
      }
    },
    mounted() {
      if (!this.isFlashHomeInform()) {
        this.initData()
        this.setIsFlashHomeInform(true)
      }
    },
    methods: {
      ...mapActions(['setIsFlashHomeInform']),
      ...mapGetters(['isFlashHomeInform']),
      handleCancel(e) {
        this.visible = false
      },
      //全阅
      showAll() {
        let baseUrl = process.env.VUE_APP_INFORM_API
        let ticket = Vue.ls.get(ACCESS_TOKEN)
        let url = baseUrl + '?ticket=' + ticket + '&action=MarkUnReadNotice'
        let ids = []
        this.notices.forEach(n => ids.push(n.DocID))
        ids = ids.join(',')
        let formData = new FormData()
        formData.append('ids', ids)
        axios.defaults.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
        axios.post(url, formData).then(res => {
          if (res.data.Status == 1) {
            this.visible = false
            this.$message.config({
              top: '200px'
            })
            this.$message.success('标记成功!', 5)
          }
        })
      },
      //阅读
      showReading(record) {
        this.contentVis = true
        let baseUrl = process.env.VUE_APP_ADD_HTTP
        let ticket = Vue.ls.get(ACCESS_TOKEN)
        let docId = record.DocID
        let UserIP = '&UserIP=' + Vue.ls.get(ACCESS_TOKEN_IP)
        let returnUrl = encodeURIComponent('/Modules/PublicDocument/view/view.htm?id=' + docId)
        let url = baseUrl + '/login.xip?LoginMethod=ssologin&Ticket=' + ticket + UserIP + '&ReturnUrl=' + returnUrl
        this.url = url
      },
      //关闭内容弹框回调 刷新数据
      afterClose() {
        this.initData()
      },
      //初始化数据
      initData() {
        let baseUrl = process.env.VUE_APP_INFORM_API
        let ticket = Vue.ls.get(ACCESS_TOKEN)
        let url = baseUrl + '?ticket=' + ticket + '&action=GetCurrentUserLastUnReadNotice'
        axios(url).then(res => {
          if (res.data.Data.length == 0) {
            //无未读通知 不显示弹框
            this.visible = false
          } else {
            this.visible = true
            this.notices = res.data.Data
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>